<template>
	<view class="bodyView" :data-theme="dataTheme">
		<view class="searchBar">
			<icon type="search" size="20" />
			<input class="bottomInput" v-model="inputV" @input="handleInput" type="text" placeholder="搜索"
				@confirm="handleConfirm" />
			<view :class="{clearView:true,show:showClearIcon}" @click="handleClearInput">
				<uni-icons type="closeempty" size="16"></uni-icons>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		nextTick,
		watch
	} from 'vue';
	import useSystemStore from '@/store/modules/system'
	const emit = defineEmits(['endInput']);
	const systemStore = useSystemStore()
	const {
		searchWord,
		activeMenuIndex,
		dataTheme
	} = storeToRefs(systemStore);
	//输入
	let inputV = ref('')
	watch(searchWord, val => {
		if (inputV.value !== val&&val)
		{
			inputV.value = val
			showClearIcon.value = true;
		}	
	})
	//是否显示清除icon
	let showClearIcon=ref(false)




	//清除输入
	let handleClearInput=()=>{
		inputV.value=''
		searchWord.value=''
		showClearIcon.value = false;
	}
	//监听输入
	let handleInput = (event) => {
		console.log(123,event);
		if (event.detail.value.length > 0) {
			showClearIcon.value = true;
		} else {
			showClearIcon.value = false;
		}
	}
	//输入完成
	let handleConfirm = () => {

		searchWord.value = inputV.value
		emit('endInput')
		if (activeMenuIndex.value == 0)
			activeMenuIndex.value = 1
		nextTick(() => {
			inputV.value = ''
			showClearIcon.value = false;
		})
	}
</script>

<style lang="scss" scoped>
	.bodyView {
		//#ifdef MP-WEIXIN
		width: 100%;
		//#endif
		//#ifndef MP-WEIXIN
		width: unset !important
		//#endif
	}

	.searchBar {

		border-radius: 40px;
		height: 92rpx;
		padding: 0 $mainPadding;
		//width: calc(100vw - $mainPadding * 2);

		@include useTheme {
			background-color: getValue("bottombgColor");
			color: getValue("textColor2");
		}

		@include flex-teng(row, space-between);

		.bottomInput {
			margin-left: 20rpx;
			flex: 1;
		}

		.clearView {
			width: 40rpx;
			height: 40rpx;
			background-color: $mainColor;
			@include flex-teng;
			border-radius: 50%;
			transform: scale(0);
			transition: all 0.3s cubic-bezier(0.39, 0.575, 0.565, 1);
			&.show{
				transform: scale(1);
			}
		}
	}
</style>